<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
    <title>角色列表</title>
     <link href="/TFUI/libs/ZUI/css/zui.css" rel="stylesheet">
    <link href="/TFUI/libs/table/table-style.css" rel="stylesheet">
    <link href="/TFUI/css/index.css" rel="stylesheet">
    <script src="/TFUI/libs/jquery/jquery-1.8.3.min.js"></script>
    <script src="/TFUI/libs/ZUI/js/zui.min.js"></script>
    <script src="/TFUI/libs/jquery/jquery.ba-hashchange.js"></script>
    <link href="/TFUI/libs/ZUI/lib/chosen/chosen.min.css" rel="stylesheet">
    <script src="/TFUI/libs/ZUI/lib/chosen/chosen.min.js"></script>
    <script src="/TFUI/js/public.js"></script>
    <script type="text/javascript" src="/TFUI/js/md5.js"></script>
    <script type="text/javascript" src="/TFUI/js/utils/CommonUtil.js"></script>
    <script type="text/javascript" src="/TFUI/js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="/TFUI/libs/ZUI/lib/datetimepicker/datetimepicker.min.css">
	<script type="text/javascript" src="/TFUI/libs/ZUI/lib/datetimepicker/datetimepicker.min.js"></script>
	<script type="text/javascript" src="/TFUI/js/utils/datetimepickerInit.js"></script>
	<script type="text/javascript" src="/views/login/loginFilter.js"></script>
</head>

<body menuNo="role_manager_menu">
		<div class="row" id="tf-center-head" style="margin:0;padding:10px 0;border-bottom: 1px solid #D7D7D7;">
				<form class="form-horizontal">
				
					<div class="col-md-8">
					
						<div class="col-xs-4"><div class="input-group" style="padding-top:0px;"><span class="input-group-addon">检索词</span><input type="text" class="form-control searchParameter"  id="search_keywords"  placeholder="角色名称/角色编号"></div></div>

						<div class="tf-hidden-seach hidden">

						</div>			
									
					</div>

					<div class="col-md-4">
						<!-- <span style="padding-right:8px;" class="tf-Open-seach"><i class="icon icon-double-angle-down"></i></span> -->
						<button class="btn btn-primary" type="button" id="searchBtn" onclick="SysRoleListPage.search();">
							<i class="icon icon-search"></i>
							搜索
						</button>
						<div class="pull-right" style="padding-right:20px">
							<div class="dropdown dropdown-hover" style="display:inline-block;" id="hideColumnLayer">
						    <button class="btn btn-primary" type="button" data-toggle="dropdown" title="隐藏表头"><i class="icon icon-eye-close"></i></button>
									<ul class="dropdown-menu" style="left:-65px;">
										<li><label class="checkbox-inline" style="margin-left:20px;"><input type="checkbox" >角色名称</label></li>
										<li><label class="checkbox-inline" style="margin-left:20px;"><input type="checkbox" >角色编号</label></li>
										<li><label class="checkbox-inline" style="margin-left:20px;"><input type="checkbox" >备注</label></li>
									</ul>
							</div>
							<button title="新增" class="btn btn-primary permissionMenu addRoleBtn"  onclick="SysRoleListPage.popAddSysRoleWindow();" style="margin-left:8px;" type="button"><i class="icon icon-plus"></i></button>
						</div>
					</div>
				</form>
		</div>
		<div class="col-md-12">
			<div id="tf-center-table" class="col-md-12" style="overflow:auto;">
				<table class="dataGrid table table-fixed" style="margin-bottom: 10px;" id="dataGridTable">
					<thead id = "dataListThread">
						<tr>
							<th style="width:4%;" class="chooseRecord"><input type="checkbox" class="checkall"></th>
							<th>角色名称</th>
							<th>角色编号</th>
							<th>备注</th>
							<th>操作</th>
						</tr>
					</thead>
			
					<tbody id="dataListLayer"> </tbody>
				</table>
				
				<!--加载图片和未找到的图片-->
				<div style="text-align:center;display:none;position:relative;top:30%;" id="loadingLayer"><i class="icon icon-spin icon-spinner icon-3x"></i></div>
				<div class="noMsg" style="display: none;"  id="recordLayer" ><i class="icon icon-chat-line">&nbsp;暂无数据</i></div>
				
				<!-- 分页工具栏 -->
				<div id="pagingToolbarLayer" class="col-md-12" style="padding:10px 20px;border-top:1px solid #D7D7D7;position:fixed;bottom:0px;">	
					<button class="btn btn-primary"  id="exportBtn"  type="button">导出</button>
					<div class="pagingToolbar" style="margin:0;">
						<select class="chosen-select form-control" id="pageSizeSelectLayer" style="width:100px;display:inline-block;"></select>
						<button id="firstPageBtn" class="btn btn-primary" type="button">首页</button>
						<span id="pageCodeLayer" class="number-page"></span>
						<button id="lastPageBtn" class="btn btn-primary" type="button">末页</button>
						<div class="btn btn-primary" style="background:white;color:#838391;">
							共<span id="pageCountLayer">0</span>页/<span id="recordCountLayer">0</span>条
						</div>
					</div>	
				</div>
				
			</div>
		</div>
		
		<!-- addSysRoleWindow弹窗start -->
		<div class="modal fade" id="addSysRoleWindow">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title">新增</h4>
		      </div>
		      <div class="modal-body" style="padding:20px;">
					<form class="form-horizontal">
							
						<div class="form-group">
							<label for="add_roleName" class="col-sm-2">角色名称</label>
							<div class="col-md-6 col-sm-10">
								<input type="text" class="form-control"  id="add_roleName" autocomplete="off">
							</div>
						</div>
						
						<div class="form-group">
							<label for="add_roleNo" class="col-sm-2">角色编号</label>
							<div class="col-md-6">
								<input type="text" class="form-control" id="add_roleNo"  autocomplete="off"/>
							</div>
							<div class="col-md-2">
								<button class="btn" type="button" onclick="SysRoleListPage.createRoleNo(1)">生成编号</button>
							</div>
						</div>
						
						<div class="form-group">
							<label for="add_remark" class="col-sm-2">备注</label>
							<div class="col-md-6 col-sm-10">
								<textarea class="form-control" rows="5"  id="add_remark"></textarea>
							</div>
						</div>
						
					</form>				  
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default closeWindowBtn" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="addSysRoleBtn" onclick="SysRoleListPage.addSysRole();">保存</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		<!-- addSysRoleWindow弹窗end -->
		
		<!-- 编辑角色弹窗start -->
		<div class="modal fade" id="editSysRoleWindow">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title">编辑</h4>
		      </div>
		      <div class="modal-body" style="padding:20px;">
					<form class="form-horizontal">
						 
						<div class="form-group">
							<label for="edit_roleName" class="col-sm-2">角色名称</label>
							<div class="col-md-6 col-sm-10">
								<input type="text" class="form-control"  id="edit_roleName" autocomplete="off">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit_roleNo" class="col-sm-2">角色编号</label>
							<div class="col-md-6 col-sm-10">
								<input type="text" class="form-control" id ="edit_roleNo"  autocomplete="off">
							</div>
							<div class="col-md-2">
								<button class="btn" type="button" onclick="SysRoleListPage.createRoleNo(2)">生成编号</button>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit_remark" class="col-sm-2">备注</label>
							<div class="col-md-6 col-sm-10">
								<textarea class="form-control" rows="5"  id="edit_remark"></textarea>
							</div>
						</div>
						
					</form>				  
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default closeWindowBtn" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="updateSysRoleBtn" onclick="SysRoleListPage.updateSysRole();">保存</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		<!-- 编辑角色弹窗end -->
		
		<!-- detailSysRoleWindow弹窗start -->
		<div class="modal fade" id="detailSysRoleWindow">
		  <div class="modal-dialog modal-lg">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title">详情</h4>
		      </div>
		      <div class="modal-body" style="padding:20px;overflow-y:auto;">
					
					<form class="form-horizontal">
						 
						<div class="form-group">
							<label for="detail_roleName" class="col-sm-2">角色名称</label>
							<div class="col-md-6 col-sm-10">
								<input type="text" class="form-control"  id="detail_roleName" autocomplete="off" disabled="disabled">
							</div>
						</div>
						
						<div class="form-group">
							<label for="detail_roleNo" class="col-sm-2">角色编号</label>
							<div class="col-md-6 col-sm-10">
								<input type="text" class="form-control" id ="detail_roleNo"  autocomplete="off" disabled="disabled">
							</div>
						</div>

						<div class="form-group">
							<label for="detail_remark" class="col-sm-2">备注</label>
							<div class="col-md-6 col-sm-10">
								<textarea class="form-control" rows="5"  id="detail_remark" disabled="disabled"></textarea>
							</div>
						</div>
												
					</form>				  
				  
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		<!-- detailSysRoleWindow弹窗end -->
		
		<!-- deleteSysRoleWindow弹窗start -->
		<div class="modal fade" id="deleteSysRoleWindow">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title">提示</h4>
		      </div>
		      <div class="modal-body" style="padding:20px;">
					
					<h4 style="text-align:center;">
						<i class="icon icon-trash icon-2x"></i>&nbsp;&nbsp;确认要删除该条记录吗?
					</h4>
				  	
		      </div>
		      
		      <div class="modal-footer">
		      	<button type="button" class="btn btn-default closeWindowBtn" data-dismiss="modal">关闭</button>
		      	<button type="button" class="btn btn-primary" id="deleteSysRoleBtn" onclick="SysRoleListPage.deleteSysRole();">确定</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		<!-- deleteSysRoleWindow弹窗end -->
		
		<!-- 权限设置弹窗start -->
		<div class="modal fade" id="permissionWindow">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title">菜单按钮 - 权限设置</h4>
		      </div>
		      <div class="modal-body" style="padding:20px;height:80vh;overflow-y:auto;">
					
					<ul class="tree tree-lines"  data-ride="tree" id="menuLayerId">
					</ul>
				  	
		      </div>
		      
		      <div class="modal-footer">
		      	<button type="button" class="btn btn-default closeWindowBtn" data-dismiss="modal">关闭</button>
		      	<button type="button" class="btn btn-primary  permissionMenu sureRoleBindMenuBtn" onclick="SysRoleListPage.surePermission();">确定</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		<!-- 权限设置弹窗end -->
		
		<!-- 绑定用户弹窗start -->
		<div class="modal fade" id="bindUserWindow">
		  <div class="modal-dialog modal-lg">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title"> <span id="currentBindRoleSpan"></span>绑定用户</h4>
		      </div>
		      <div class="modal-body" style="min-height:90vh;overflow-y:auto;">
					
					<div style="padding:10px;">
					
						<div class="col-xs-4"><div class="input-group" style="padding-top:0px;"><span class="input-group-addon">检索词</span><input type="text" class="form-control"  id="search_userKeyWords"  placeholder="姓名/账号/手机号"></div></div>
						<div class="col-xs-3">
							<div class="input-group" style="padding-top:0px;">
								<span class="input-group-addon">状态</span>
								<select class="form-control"  id="bindFlagSelect" onchange="SysRoleListPage.searchUser();">
									<option value="">全部</option>
									<option value="false">未绑定</option>
									<option value="true">已绑定</option>
								</select>
							</div>
						</div>
						
						  <button type="button" class="btn btn-primary"  onclick="SysRoleListPage.searchUser();">查询</button>
						  <button type="button" class="btn btn-primary permissionMenu roleBindBatchUserBtn"  onclick="SysRoleListPage.batchBindUser(1);">批量绑定</button>
						  <button type="button" class="btn btn-primary permissionMenu roleUnbindBatchUserBtn"  onclick="SysRoleListPage.batchBindUser(2);">批量解绑</button>
					  
									
					</div>
					
					<table class="dataGrid table"  id="dataGridTable_user" style="clear:both;margin-bottom: 50px;">
					<thead id = "dataListThread_user" >
						<tr>
							<th style="width:4%;" class="chooseRecord"><input type="checkbox"  class="checkall"></th>
							<th>账号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>手机号</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
			
					<tbody id="dataListLayer_user" > </tbody>
				</table>
			
				<!--加载图片和未找到的图片-->
				<div style="text-align:center;display:none;position:relative;top:30%;" id="loadingLayer_user"><i class="icon icon-spin icon-spinner icon-3x"></i></div>
				<div class="noMsg" style="display: none;"  id="recordLayer_user" ><i class="icon icon-chat-line">&nbsp;暂无数据</i></div>
				
				<!-- 分页工具栏 -->
				<div id="pagingToolbarLayer_user" class="col-md-12" style="padding:10px 20px;border-top:1px solid #D7D7D7;position:fixed;bottom:0px;">	
					<div class="pagingToolbar" style="margin:0;">
						<select class="chosen-select form-control" id="pageSizeSelectLayer_user" style="width:100px;display:inline-block;"></select>
						<button id="firstPageBtn_user" class="btn btn-primary" type="button">首页</button>
						<span id="pageCodeLayer_user" class="number-page"></span>
						<button id="lastPageBtn_user" class="btn btn-primary" type="button">末页</button>
						<div class="btn btn-primary" style="background:white;color:#838391;">
							共<span id="pageCountLayer_user">0</span>页/<span id="recordCountLayer_user">0</span>条
						</div>
					</div>	
				</div>
			
			</div>
				  	
		      
		    </div>
		  </div>
		</div>
		<!-- 绑定用户弹窗end -->

		<script type="text/javascript" src="/TFUI/js/utils/PagingTooler.js"></script>
		<script type="text/javascript" src="/views/sysRole/sysRoleListPage.js"></script>
		<script src="/TFUI/libs/export/xlsx.core.min.js"></script>
		<script src="/TFUI/libs/export/blob.js"></script>
		<script src="/TFUI/libs/export/FileSaver.min.js"></script>
		<script src="/TFUI/libs/export/tableExport.js"></script>
		<script src="/TFUI/js/tableInit.js"></script>

</body>

<script>

/*导出excel功能*/
$("#dataGridTable").tableExport({exportBtnConfig : {"#exportBtn" : "xlsx"} , fileName : "列表导出" , ignoreCloumns : ["操作"]});

</script>


</html>
